<div id="content">
  <div class="row s_page_title">
    <sa-big-breadcrumbs
      [items]="['收费管理', '开票管理']"
      icon="fa fa-list-alt"
      class="col-xs-12 col-sm-7 col-md-7 col-lg-4"
    ></sa-big-breadcrumbs>
  </div>
  <sa-widgets-grid>
    <div class="s_table">
      <div sa-widget [editbutton]="false" color="darken" class="clearfix">
        <header>
          <span class="widget-icon"><i class="fa fa-table"></i></span>
          <h2>开票管理</h2>
        </header>
        <div>
          <div class="widget-body no-padding">
            <div class="page-header clearfix s_table_opreation">
              <div *ngIf="TabType == 'apply'">
                <!-- <sa-company-tree-car companyTreeId="searchcompanyTree" tcarNumberSelect2="searchCarNumberSelect2" wrapId="content" [isShowCarSort]="false" [isShowCarNum]="false" (companySelected)="companySelected($event)"></sa-company-tree-car> -->
                <div class="left page-header-btn" style="width: calc(100% - 220px)">
                  <div class="top_module">
                    <span class="module_text">费用类型</span>
                    <select name="" id="" class="module_inp" [(ngModel)]="tableSearch.typeExpense">
                      <option value="">全部</option>
                      <option value="1">安装费</option>
                      <option value="2">维修费</option>
                      <option value="3">服务费</option>
                      <option value="4">对接费</option>
                    </select>
                  </div>

                  <div class="top_module">
                    <span class="module_text">开票状态</span>
                    <select name="" id="" class="module_inp" [(ngModel)]="tableSearch.state">
                      <option value="">全部</option>
                      <option value="0">待开票</option>
                      <option value="1">已开票</option>
                      <option value="2">已取消</option>
                      <option value="3">开票中</option>
                    </select>
                  </div>

                  <div class="top_module">
                    <span class="module_text">发票类型</span>
                    <select name="" id="" class="module_inp" [(ngModel)]="tableSearch.invoiceType">
                      <option value="">全部</option>
                      <option value="0">纸质发票</option>
                      <option value="1">电子发票(普票)</option>
                      <option value="2">电子发票(专票)</option>
                    </select>
                  </div>

                  <div class="top_module">
                    <span class="module_text">发票来源</span>
                    <select name="" id="" class="module_inp" [(ngModel)]="tableSearch.system">
                      <option value="">全部</option>
                      <option value="0">小程序</option>
                      <option value="1">汉德平台</option>
                      <option value="2">H5</option>
                    </select>
                  </div>

                  <sa-company-tree-car
                    title="所属项目"
                    companyTreeId="companyTree"
                    wrapId="content"
                    [isShowCarSort]="false"
                    [isShowCarNum]="false"
                    [hasEmpty]="true"
                    (companySelected)="projectSelected($event)"
                  ></sa-company-tree-car>

                  <div class="top_module">
                    <span class="module_text">时间类型</span>
                    <select name="" id="" class="module_inp" [(ngModel)]="tableSearch.dateType">
                      <option value="">全部</option>
                      <!-- <option value="payTime">付款时间</option> -->
                      <option value="createTime">开票申请时间</option>
                      <option value="invoiceCompleteTime">开票完成时间</option>
                    </select>
                  </div>

                  <div class="selectDate top_module">
                    <table-select-date [notInit]="true" (outerTime)="getSelectTableTime($event)"></table-select-date>
                  </div>
                  <button type="button" class="btn btn-primary" (click)="table_search()">查询</button>
                  <button type="button" class="btn btn-primary" (click)="dataExceport()">导出</button>
                  <button class="btn btn-primary" type="button" (click)="batchInvoice(batchInvoiceModal)">
                    批量操作
                  </button>
                  <button class="btn btn-primary" type="button" (click)="applyInvoices()">申请开票</button>
                </div>
                <div class="right top-search">
                  <input
                    type="text"
                    [(ngModel)]="tableSearch.searchKey"
                    (change)="table_search()"
                    class="search-input"
                    placeholder="用户，电话，付款方，备注..."
                  />
                  <span class="top-search-box">
                    <button class="top-search-btn" type="button" (click)="table_search()">
                      <i class="fa fa-search"></i>
                    </button>
                  </span>
                </div>
              </div>
              <div *ngIf="TabType == 'rise'">
                <div class="left page-header-btn" style="width: calc(100% - 220px)">
                  <button type="button" class="btn btn-primary" (click)="dataExceport()">导出</button>
                </div>
                <div class="right top-search">
                  <input
                    type="text"
                    [(ngModel)]="tableSearch.searchKey"
                    (change)="table_search()"
                    class="search-input"
                    placeholder="用户，手机号码，单位地址等..."
                  />
                  <span class="top-search-box">
                    <button class="top-search-btn" type="button" (click)="table_search()">
                      <i class="fa fa-search"></i>
                    </button>
                  </span>
                </div>
              </div>
              <div *ngIf="TabType == 'address'">
                <div class="left page-header-btn" style="width: calc(100% - 220px)">
                  <button type="button" class="btn btn-primary" (click)="dataExceport()">导出</button>
                </div>
                <div class="right top-search">
                  <input
                    type="text"
                    [(ngModel)]="tableSearch.searchKey"
                    (change)="table_search()"
                    class="search-input"
                    placeholder="用户，手机号码等..."
                  />
                  <span class="top-search-box">
                    <button class="top-search-btn" type="button" (click)="table_search()">
                      <i class="fa fa-search"></i>
                    </button>
                  </span>
                </div>
              </div>
            </div>

            <div class="tabbable">
              <ul
                class="nav nav-tabs"
                id="myTab"
                style="padding-left: 12px; background-image: linear-gradient(#f1f5fd, #e9f0ff)"
              >
                <li class="active s-lis">
                  <a data-toggle="tab" href="#apply" (click)="tabChange('apply')">开票申请</a>
                </li>
                <li class="s-lis"><a data-toggle="tab" href="#rise" (click)="tabChange('rise')">抬头管理</a></li>
                <li class="s-lis"><a data-toggle="tab" href="#address" (click)="tabChange('address')">地址管理</a></li>
              </ul>
              <div class="tab-content" style="padding: 0; border: none">
                <div id="apply" class="tab-pane active">
                  <div class="table_scroll">
                    <table
                      class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table"
                    >
                      <thead>
                        <tr>
                          <th>
                            <div class="checkbox" style="margin: 0; left: 5px; text-align: center">
                              <label>
                                <input
                                  type="checkbox"
                                  class="checkbox style-0"
                                  [(ngModel)]="allChecked"
                                  (click)="allSelected()"
                                />
                                <span></span>
                              </label>
                            </div>
                          </th>
                          <th>用户</th>
                          <th>手机号码</th>
                          <th>开票申请时间</th>
                          <th>开票企业名称</th>
                          <th>收款方</th>
                          <th>所属项目</th>
                          <th>金额[元]</th>
                          <!-- <th>付款时间</th> -->
                          <th>费用类型</th>
                          <th>发票类型</th>
                          <th>开票人类型</th>
                          <th>付款凭证</th>
                          <th>电子邮箱</th>
                          <th>备注</th>
                          <th>开票状态</th>
                          <th>开票完成时间</th>
                          <th>取消开票原因</th>
                          <!-- <th>收票人姓名</th>
                          <th>收票人手机号</th>
                          <th>收票地址</th>
                          <th>快递单号</th> -->
                          <th>发票来源</th>
                          <th>操作</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr *ngFor="let row of resultTableData; let i = index">
                          <td>
                            <div class="checkbox" style="margin: 0; left: 5px; text-align: center">
                              <label class="checkbox-label">
                                <input
                                  type="checkbox"
                                  class="checkbox style-0"
                                  [(ngModel)]="row.isChecked"
                                  (click)="rowSelected(row, $event, i)"
                                />
                                <span class="checkbox-flag"></span>
                              </label>
                            </div>
                          </td>
                          <td>{{ row.nickName ? row.nickName : row.name }}</td>
                          <td>{{ row.phone }}</td>
                          <td>{{ row.createTime }}</td>
                          <td>{{ row.headName }}</td>
                          <td>{{ row.payeeName }}</td>
                          <td>{{ row.factoryName || '' }}</td>
                          <td>{{ row.money }}</td>
                          <!-- <td>{{row.payTime}}</td> -->
                          <td>
                            <span *ngIf="row.typeExpense == 1">安装费</span>
                            <span *ngIf="row.typeExpense == 2">维修费</span>
                            <span *ngIf="row.typeExpense == 3">服务续费</span>
                            <span *ngIf="row.typeExpense == 4">对接费</span>
                          </td>
                          <td>
                            <span *ngIf="row.invoiceType == 0">纸质发票</span>
                            <span *ngIf="row.invoiceType == 1">电子发票(普票)</span>
                            <span *ngIf="row.invoiceType == 2">电子发票(专票)</span>
                          </td>
                          <td>
                            <span *ngIf="row.billingType == 0">企业</span>
                            <span *ngIf="row.billingType == 1">个人</span>
                          </td>
                          <td>
                            <button
                              *ngIf="row.certificateUrls && row.certificateUrls.length"
                              type="button"
                              (click)="showImg(row.certificateUrls, ImgModal)"
                            >
                              查看凭证
                            </button>
                          </td>
                          <td>{{ row.userEmail }}</td>
                          <td>{{ row.remark }}</td>
                          <td>
                            <span *ngIf="row.state == 0" style="color: #ff892a">待开票</span>
                            <span *ngIf="row.state == 1" style="color: #69aa46">已开票</span>
                            <span *ngIf="row.state == 2" style="color: #7d7e7d">已取消</span>
                            <span *ngIf="row.state == 3">开票中</span>
                          </td>
                          <td>{{ row.invoiceCompleteTime }}</td>
                          <td>{{ row.cancelInvoicingReason }}</td>
                          <!-- <td>{{ row.shippingName }}</td>
                          <td>{{ row.shippingPhone }}</td>
                          <td>{{ row.provinceName }}{{ row.cityName }}{{ row.townName }}{{ row.address }}</td>
                          <td>{{ row.expressDeliveryNumber }}</td> -->
                          <td>
                            <span *ngIf="row.system == 0">小程序</span>
                            <span *ngIf="row.system == 1">汉德平台</span>
                            <span *ngIf="row.system == 2">H5</span>
                          </td>
                          <td>
                            <button
                              *ngIf="row.state != 1 && row.state != 2"
                              type="button"
                              (click)="InvoiceStatusBtn(row, InvoiceStatusModal)"
                            >
                              开票
                            </button>
                            <button
                              type="button"
                              (click)="InvoiceCancelBtn(row, CancelInvoiceStatusModal)"
                              *ngIf="row.state == 0"
                            >
                              取消开票
                            </button>
                            <!-- <button *ngIf="row.state != 1" type="button" (click)="InvoiceEditBtn(row, InvoiceEditModal)">编辑</button> -->
                            <button
                              *ngIf="row.state != 1 && row.state != 2"
                              type="button"
                              (click)="applyInvoices(row.id)"
                            >
                              编辑
                            </button>
                            <button type="button" (click)="ViewDetailsBtn(row, ViewDetailsModal)">查看详情</button>
                            <button type="button" (click)="downloadInvoice(row)" *ngIf="row.state == 1 && row.invoiceFileURL !== ''">下载</button>
                            <button type="button" (click)="deleteApplyBtn(row)">删除</button>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <div class="table-fix clearfix">
                    <paginator
                      [totalRecords]="totalCount"
                      [rows]="pageSize"
                      [currentPage]="curPage - 1"
                      (onPageChange)="paginate($event)"
                    ></paginator>
                    <button type="button" class="btn default refresh_btn" (click)="refresh()">
                      <i class="fa fa-refresh"></i>
                    </button>
                  </div>
                </div>
                <div id="rise" class="tab-pane">
                  <div class="table_scroll">
                    <table
                      class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table"
                    >
                      <thead>
                        <tr>
                          <th>用户</th>
                          <th>手机号码</th>
                          <th>企业名称</th>
                          <th>企业税号</th>
                          <th>注册地址</th>
                          <th>电话号码</th>
                          <th>开户银行</th>
                          <th>银行账户</th>
                          <th>创建时间</th>
                          <th>更新时间</th>
                          <th>操作</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr *ngFor="let row of resultTableData; let i = index">
                          <td>{{ row.name }}</td>
                          <td>{{ row.phone }}</td>
                          <td>{{ row.headName }}</td>
                          <td>{{ row.dutyParagraph }}</td>
                          <td>{{ row.companyAddress }}</td>
                          <td>{{ row.companyPhone }}</td>
                          <td>{{ row.bankName }}</td>
                          <td>{{ row.bankAccount }}</td>
                          <td>{{ row.createTime }}</td>
                          <td>{{ row.updateTime }}</td>
                          <td>
                            <button type="button" (click)="RiseEditBtn(row, RiseEditModal)">编辑</button>
                            <button type="button" (click)="deleteRiseBtn(row)">删除</button>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <div class="table-fix clearfix">
                    <paginator
                      [totalRecords]="totalCount"
                      [rows]="pageSize"
                      [currentPage]="curPage - 1"
                      (onPageChange)="paginate($event)"
                    ></paginator>
                    <button type="button" class="btn default refresh_btn" (click)="refresh()">
                      <i class="fa fa-refresh"></i>
                    </button>
                  </div>
                </div>
                <div id="address" class="tab-pane">
                  <div class="table_scroll">
                    <table
                      class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table"
                    >
                      <thead>
                        <tr>
                          <th>用户</th>
                          <th>手机号码</th>
                          <th>收货人</th>
                          <th>收货人号码</th>
                          <th>收货地址</th>
                          <th>创建时间</th>
                          <th>更新时间</th>
                          <th>操作</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr *ngFor="let row of resultTableData; let i = index">
                          <td>{{ row.name }}</td>
                          <td>{{ row.phone }}</td>
                          <td>{{ row.shippingName }}</td>
                          <td>{{ row.shippingPhone }}</td>
                          <td>{{ row.provinceName }}{{ row.cityName }}{{ row.townName }}{{ row.address }}</td>
                          <td>{{ row.createTime }}</td>
                          <td>{{ row.updateTime }}</td>
                          <td>
                            <button type="button" (click)="ReceivingTnfoBtn(row, ReceivingTnfoModal)">编辑</button>
                            <button type="button" (click)="deleteAddressBtn(row)">删除</button>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <div class="table-fix clearfix">
                    <paginator
                      [totalRecords]="totalCount"
                      [rows]="pageSize"
                      [currentPage]="curPage - 1"
                      (onPageChange)="paginate($event)"
                    ></paginator>
                    <button type="button" class="btn default refresh_btn" (click)="refresh()">
                      <i class="fa fa-refresh"></i>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </sa-widgets-grid>

  <!--  批量开票弹窗  -->
  <div
    bsModal
    #batchInvoiceModal="bs-modal"
    id="batchInvoiceModal"
    class="modal fade"
    tabindex="-1"
    role="dialog"
    aria-labelledby="myLargeModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" (click)="batchInvoiceCloase(batchInvoiceModal)" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">批量操作</h4>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="form-group col-xs-12">
              <label class="col-xs-2 control-label">开票状态：</label>
              <div class="col-xs-10">
                <label class="col-sm-4" style="vertical-align: inherit">
                  <input type="radio" class="radiobox" value="1" name="1" [(ngModel)]="invoiceStutas" />
                  <span>已开票</span>
                </label>
                <label class="col-sm-4" style="vertical-align: inherit">
                  <input type="radio" class="radiobox" value="3" name="3" [(ngModel)]="invoiceStutas" />
                  <span>开票中</span>
                </label>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" (click)="batchInvoiceCloase(batchInvoiceModal)">取消</button>
          <button type="button" class="btn btn-primary" (click)="batchInvoiceSubmit(batchInvoiceModal)">确认</button>
        </div>
      </div>
    </div>
  </div>
  <!--批量开票弹窗end-->

  <!-- 开票状态   弹窗-->
  <section
    bsModal
    #InvoiceStatusModal="bs-modal"
    class="modal fade"
    role="dialog"
    tabindex="-1"
    aria-labelledby="myLargeModalLabel"
    aria-hidden="true"
    data-backdrop="static"
    data-keyboard="false"
  >
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" (click)="InvoiceStatusClose(InvoiceStatusModal)" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">开票</h4>
        </div>
        <div class="modal-body">
          <div class="row form-horizontal">
            <div class="form-group col-xs-12">
              <label class="col-xs-2 control-label">
                开票状态
                <sup>*</sup>
              </label>
              <div class="col-xs-10">
                <div>
                  <label class="col-sm-4" style="margin-bottom: 0px">
                    <input
                      type="radio"
                      class="radioSales"
                      name="state"
                      value="1"
                      (change)="clickSalesType($event.target.value)"
                    />
                    已开票
                  </label>
                  <label class="col-sm-4" style="margin-bottom: 0px">
                    <input
                      type="radio"
                      class="radioSales"
                      name="state"
                      value="3"
                      (change)="clickSalesType($event.target.value)"
                      [checked]="InvoiceStatusFrom.state == 3"
                    />
                    开票中
                  </label>
                </div>
              </div>
            </div>
            <div
              class="form-group col-xs-12"
              *ngIf="InvoiceStatusFrom.invoiceType == 1 || InvoiceStatusFrom.invoiceType == 2"
            >
              <label class="col-xs-2 control-label">电子邮箱</label>
              <div class="col-xs-10">
                <input
                  name="userEmail"
                  [(ngModel)]="InvoiceStatusFrom.userEmail"
                  type="text"
                  class="form-control form-control-sm"
                  placeholder="电子邮箱"
                />
              </div>
            </div>
            <div class="form-group col-xs-12" *ngIf="InvoiceStatusFrom.invoiceType == 0">
              <label class="col-xs-2 control-label">快递单号</label>
              <div class="col-xs-10">
                <input
                  name="expressDeliveryNumber"
                  [(ngModel)]="InvoiceStatusFrom.expressDeliveryNumber"
                  type="text"
                  class="form-control form-control-sm"
                  placeholder="快递单号"
                />
              </div>
            </div>

            <div *ngIf="InvoiceStatusFrom.invoiceType != 0 && InvoiceStatusFrom.state == 1" class="form-group col-xs-12">
              <label class="control-label col-xs-2 no-padding-right">电子发票</label>
              <div class="col-xs-10">
                <div class="fileList">
                  <button type="button" class="btn div_imgall" *ngIf="!InvoiceStatusFrom.invoiceUrl">
                    <div class="div_shuline"></div>
                    <div class="div_hengline"></div>
                    <input
                      type="file"
                      class="up"
                      title=" "
                      placeholder=" "
                      (change)="fileChange($event.target.files)"
                    />
                  </button>

                  <div *ngIf="InvoiceStatusFrom.invoiceUrl" class="file-content">
                    <div class="file-text">{{ InvoiceStatusFrom.invoiceUrl }}</div>
                    <i class="delete-file" (click)="deleteFile()">X</i>
                  </div>
                </div>
              </div>
            </div>

            <div *ngIf="InvoiceStatusFrom.invoiceType != 0 && InvoiceStatusFrom.state == 1" class="form-group col-xs-12">
              <label class="col-xs-2 control-label">邮件通知</label>
              <div class="col-xs-10">
                <label
                  class="checkbox-inline"
                >
                  <input type="checkbox" class="checkbox" (change)="isNotice($event.target.checked)" />
                  <span>邮件抄送</span>
                </label>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" (click)="InvoiceStatusClose(InvoiceStatusModal)">取消</button>
          <button type="button" class="btn btn-primary" (click)="InvoiceStatusSubmit(InvoiceStatusModal)">确认</button>
        </div>
      </div>
    </div>
  </section>
  <!-- 开票状态 弹窗end-->

  <!-- 取消开票状态   弹窗-->
  <section
    bsModal
    #CancelInvoiceStatusModal="bs-modal"
    class="modal fade"
    role="dialog"
    tabindex="-1"
    aria-labelledby="myLargeModalLabel"
    aria-hidden="true"
    data-backdrop="static"
    data-keyboard="false"
  >
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button
            type="button"
            class="close"
            (click)="CancelInvoiceStatusClose(CancelInvoiceStatusModal)"
            aria-label="Close"
          >
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">取消开票</h4>
        </div>
        <div class="modal-body">
          <div class="row form-horizontal">
            <div class="form-group col-xs-12">
              <label class="col-xs-3 control-label">取消开票原因</label>
              <div class="col-xs-9">
                <textarea
                  class="form-control"
                  [(ngModel)]="CancelInvoiceStatusFrom.cancelReason"
                  name="remark"
                  rows="3"
                  cols="30"
                  placeholder="请输入取消开票原因"
                ></textarea>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" (click)="CancelInvoiceStatusClose(CancelInvoiceStatusModal)">
            取消
          </button>
          <button type="button" class="btn btn-primary" (click)="CancelInvoiceStatusSubmit(CancelInvoiceStatusModal)">
            确认
          </button>
        </div>
      </div>
    </div>
  </section>
  <!-- 取消开票状态 弹窗end-->

  <!-- 开票编辑   弹窗-->
  <section
    bsModal
    #InvoiceEditModal="bs-modal"
    class="modal fade"
    role="dialog"
    tabindex="-1"
    aria-labelledby="myLargeModalLabel"
    aria-hidden="true"
    data-backdrop="static"
    data-keyboard="false"
  >
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" (click)="InvoiceEditClose(InvoiceEditModal)" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">编辑开票信息</h4>
        </div>
        <div class="modal-body">
          <form
            id="InvoiceEditFrom"
            class="form-horizontal"
            role="form"
            novalidate="novalidate"
            [saBootstrapValidator]="InvoiceEditFromOption"
          >
            <div class="row form-horizontal">
              <div class="form-group col-xs-12">
                <label class="col-xs-2 control-label">
                  付款方
                  <sup>*</sup>
                </label>
                <div class="col-xs-10">
                  <input
                    name="headName"
                    [(ngModel)]="InvoiceEditFrom.headName"
                    type="text"
                    class="form-control form-control-sm"
                    placeholder="付款方"
                  />
                </div>
              </div>
              <div class="form-group col-xs-12">
                <label class="col-xs-2 control-label">
                  收款方
                  <sup>*</sup>
                </label>
                <div class="col-xs-10">
                  <input
                    name="payeeName"
                    [(ngModel)]="InvoiceEditFrom.payeeName"
                    type="text"
                    disabled
                    class="form-control form-control-sm"
                    placeholder="收款方"
                  />
                </div>
              </div>
              <div class="form-group col-xs-12">
                <label class="control-label col-xs-2 col-sm-2">
                  金额[元]
                  <sup>*</sup>
                </label>
                <div class="col-xs-10">
                  <input class="form-control" name="money" [(ngModel)]="InvoiceEditFrom.money" placeholder="金额" />
                </div>
              </div>
              <!-- <div class="form-group col-xs-12">
								<label class="control-label col-xs-2 col-sm-2">付款时间<sup>*</sup></label>
								<div class="col-xs-10">
									<input class="form-control" name="payTime" [(ngModel)]='InvoiceEditFrom.payTime'
										onfocus="this.blur()" id="workPayTime" autocomplete="off" placeholder="付款时间" />
								</div>
							</div> -->
              <div class="form-group col-xs-12">
                <label class="col-xs-2 control-label">
                  费用类型
                  <sup>*</sup>
                </label>
                <div class="col-xs-10">
                  <select
                    class="form-control"
                    name="typeExpense"
                    id=""
                    [(ngModel)]="InvoiceEditFrom.typeExpense"
                    (change)="typeChange($event.target.value)"
                  >
                    <option value="1">安装费</option>
                    <option value="2">维修费</option>
                    <option value="3">服务费</option>
                    <option value="4">对接费</option>
                  </select>
                </div>
              </div>
              <div class="form-group col-xs-12">
                <label class="col-xs-2 control-label">
                  备注
                  <sup>*</sup>
                </label>
                <div class="col-xs-10">
                  <textarea
                    name="remark"
                    type="text"
                    class="form-control"
                    placeholder="备注"
                    [(ngModel)]="InvoiceEditFrom.remark"
                    rows="2"
                  ></textarea>
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" (click)="InvoiceEditClose(InvoiceEditModal)">取消</button>
          <button type="button" class="btn btn-primary" (click)="InvoiceEditSubmit(InvoiceEditModal)">确认</button>
        </div>
      </div>
    </div>
  </section>
  <!-- 开票状态 弹窗end-->

  <!-- 查看详情   弹窗-->
  <section
    bsModal
    #ViewDetailsModal="bs-modal"
    class="modal fade"
    role="dialog"
    tabindex="-1"
    aria-labelledby="myLargeModalLabel"
    aria-hidden="true"
    data-backdrop="static"
    data-keyboard="false"
  >
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" (click)="ViewDetailsClose(ViewDetailsModal)" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">查看详情</h4>
        </div>
        <div class="modal-body">
          <div class="row form-horizontal">
            <div class="form-group col-xs-12">
              <label class="col-xs-2 control-label">名称</label>
              <div class="col-xs-10">
                <input
                  name="headName"
                  [(ngModel)]="ViewDetailsFrom.headName"
                  type="text"
                  class="form-control form-control-sm"
                  disabled
                />
              </div>
            </div>
            <div class="form-group col-xs-12">
              <label class="col-xs-2 control-label">税号</label>
              <div class="col-xs-10">
                <input
                  name="dutyParagraph"
                  [(ngModel)]="ViewDetailsFrom.dutyParagraph"
                  type="text"
                  class="form-control form-control-sm"
                  disabled
                />
              </div>
            </div>
            <div class="form-group col-xs-12">
              <label class="col-xs-2 control-label">单位地址</label>
              <div class="col-xs-10">
                <input
                  name="companyAddress"
                  [(ngModel)]="ViewDetailsFrom.companyAddress"
                  type="text"
                  class="form-control form-control-sm"
                  disabled
                />
              </div>
            </div>
            <div class="form-group col-xs-12">
              <label class="col-xs-2 control-label">电话号码</label>
              <div class="col-xs-10">
                <input
                  name="companyPhone"
                  [(ngModel)]="ViewDetailsFrom.companyPhone"
                  type="text"
                  class="form-control form-control-sm"
                  disabled
                />
              </div>
            </div>
            <div class="form-group col-xs-12">
              <label class="col-xs-2 control-label">开户银行</label>
              <div class="col-xs-10">
                <input
                  name="bankName"
                  [(ngModel)]="ViewDetailsFrom.bankName"
                  type="text"
                  class="form-control form-control-sm"
                  disabled
                />
              </div>
            </div>
            <div class="form-group col-xs-12">
              <label class="col-xs-2 control-label">银行账户</label>
              <div class="col-xs-10">
                <input
                  name="bankAccount"
                  [(ngModel)]="ViewDetailsFrom.bankAccount"
                  type="text"
                  class="form-control form-control-sm"
                  disabled
                />
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" (click)="ViewDetailsClose(ViewDetailsModal)">取消</button>
        </div>
      </div>
    </div>
  </section>
  <!-- 查看详情 弹窗end-->

  <!-- 抬头编辑   弹窗-->
  <section
    bsModal
    #RiseEditModal="bs-modal"
    class="modal fade"
    role="dialog"
    tabindex="-1"
    aria-labelledby="myLargeModalLabel"
    aria-hidden="true"
    data-backdrop="static"
    data-keyboard="false"
  >
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" (click)="RiseEditClose(RiseEditModal)" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">编辑抬头信息</h4>
        </div>
        <div class="modal-body">
          <form
            id="RiseEditFrom"
            class="form-horizontal"
            role="form"
            novalidate="novalidate"
            [saBootstrapValidator]="RiseEditFromOption"
          >
            <div class="row form-horizontal">
              <div class="form-group col-xs-12">
                <label class="col-xs-2 control-label">
                  名称
                  <sup>*</sup>
                </label>
                <div class="col-xs-10">
                  <input
                    name="headName"
                    [(ngModel)]="RiseEditFrom.headName"
                    type="text"
                    class="form-control form-control-sm"
                    placeholder="名称"
                  />
                </div>
              </div>
              <div class="form-group col-xs-12">
                <label class="col-xs-2 control-label">
                  税号
                  <sup>*</sup>
                </label>
                <div class="col-xs-10">
                  <input
                    name="dutyParagraph"
                    [(ngModel)]="RiseEditFrom.dutyParagraph"
                    type="text"
                    class="form-control form-control-sm"
                    placeholder="税号"
                  />
                </div>
              </div>
              <div class="form-group col-xs-12">
                <label class="control-label col-xs-2 col-sm-2">单位地址</label>
                <div class="col-xs-10">
                  <input
                    class="form-control"
                    name="companyAddress"
                    [(ngModel)]="RiseEditFrom.companyAddress"
                    placeholder="单位地址"
                  />
                </div>
              </div>
              <div class="form-group col-xs-12">
                <label class="control-label col-xs-2 col-sm-2">电话号码</label>
                <div class="col-xs-10">
                  <input
                    class="form-control"
                    name="companyPhone"
                    [(ngModel)]="RiseEditFrom.companyPhone"
                    placeholder="电话号码"
                  />
                </div>
              </div>
              <div class="form-group col-xs-12">
                <label class="control-label col-xs-2 col-sm-2">开户银行</label>
                <div class="col-xs-10">
                  <input
                    class="form-control"
                    name="bankName"
                    [(ngModel)]="RiseEditFrom.bankName"
                    placeholder="开户银行"
                  />
                </div>
              </div>
              <div class="form-group col-xs-12">
                <label class="control-label col-xs-2 col-sm-2">银行账户</label>
                <div class="col-xs-10">
                  <input
                    class="form-control"
                    name="bankAccount"
                    [(ngModel)]="RiseEditFrom.bankAccount"
                    placeholder="银行账户"
                  />
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" (click)="RiseEditClose(RiseEditModal)">取消</button>
          <button type="button" class="btn btn-primary" (click)="RiseEditSubmit(RiseEditModal)">确认</button>
        </div>
      </div>
    </div>
  </section>
  <!-- 抬头编辑 弹窗end-->

  <!-- 收货信息   弹窗-->
  <section
    bsModal
    #ReceivingTnfoModal="bs-modal"
    class="modal fade"
    role="dialog"
    tabindex="-1"
    aria-labelledby="myLargeModalLabel"
    aria-hidden="true"
    data-backdrop="static"
    data-keyboard="false"
  >
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" (click)="ReceivingTnfoClose(ReceivingTnfoModal)" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">编辑收货信息</h4>
        </div>
        <div class="modal-body">
          <form
            id="ReceivingTnfoFrom"
            class="form-horizontal"
            role="form"
            novalidate="novalidate"
            [saBootstrapValidator]="ReceivingTnfoFromOption"
          >
            <div class="row form-horizontal">
              <div class="form-group col-xs-12">
                <label class="col-xs-2 control-label">
                  收货人
                  <sup>*</sup>
                </label>
                <div class="col-xs-10">
                  <input
                    class="form-control"
                    type="text"
                    [(ngModel)]="ReceivingTnfoFrom.shippingName"
                    name="shippingName"
                    placeholder="收货人"
                  />
                </div>
              </div>
              <div class="form-group col-xs-12">
                <label class="col-xs-2 control-label">
                  手机号码
                  <sup>*</sup>
                </label>
                <div class="col-xs-10">
                  <input
                    class="form-control"
                    type="text"
                    [(ngModel)]="ReceivingTnfoFrom.shippingPhone"
                    name="shippingPhone"
                    placeholder="手机号码"
                  />
                </div>
              </div>
              <div class="form-group col-xs-12">
                <label class="control-label col-xs-2">
                  省份
                  <sup>*</sup>
                </label>
                <div class="col-xs-10">
                  <div class="clearfix">
                    <select
                      class="form-control"
                      [(ngModel)]="ReceivingTnfoFrom.provinceId"
                      (change)="provinceChange($event.target.value)"
                      name="provinceId"
                      placeholder="请选择"
                      autocomplete="address-level1"
                    >
                      <option value="">请选择</option>
                      <option *ngFor="let item of provinceNameArr" [value]="item.id">
                        {{ item.areaName }}
                      </option>
                    </select>
                  </div>
                </div>
              </div>

              <div class="form-group col-xs-12">
                <label class="control-label col-xs-2">
                  城市
                  <sup>*</sup>
                </label>
                <div class="col-xs-10">
                  <div class="clearfix">
                    <select
                      class="form-control"
                      [(ngModel)]="ReceivingTnfoFrom.cityId"
                      (change)="cityChange($event.target.value)"
                      name="cityId"
                      placeholder="请选择"
                      autocomplete="address-level2"
                    >
                      <option value="">请选择</option>
                      <option *ngFor="let item of cityNameArr" [value]="item.id">{{ item.areaName }}</option>
                    </select>
                  </div>
                </div>
              </div>

              <div class="form-group col-xs-12">
                <label class="control-label col-xs-2">
                  市区
                  <sup>*</sup>
                </label>
                <div class="col-xs-10">
                  <div class="clearfix">
                    <select
                      class="form-control"
                      [(ngModel)]="ReceivingTnfoFrom.townId"
                      (change)="townChange($event.target.value)"
                      name="townId"
                      placeholder="请选择"
                      autocomplete="address-level3"
                    >
                      <option value="">请选择</option>
                      <option *ngFor="let item of townNameArr" [value]="item.id">{{ item.areaName }}</option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="form-group col-xs-12">
                <label class="col-xs-2 control-label">
                  邮寄地址
                  <sup>*</sup>
                </label>
                <div class="col-xs-10">
                  <input
                    class="form-control"
                    type="text"
                    [(ngModel)]="ReceivingTnfoFrom.address"
                    name="address"
                    placeholder="邮寄地址"
                  />
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" (click)="ReceivingTnfoClose(ReceivingTnfoModal)">取消</button>
          <button type="button" class="btn btn-primary" (click)="ReceivingTnfoSubmit(ReceivingTnfoModal)">确认</button>
        </div>
      </div>
    </div>
  </section>
  <!-- 收货信息 弹窗end-->

  <!-- 图片查看   弹窗-->
  <section
    bsModal
    #ImgModal="bs-modal"
    class="modal fade"
    tabindex="-1"
    role="dialog"
    aria-labelledby="myLargeModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" aria-label="Close" (click)="closeImg(ImgModal)">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">图片查看</h4>
        </div>
        <div class="modal-body">
          <div class="row form-horizontal imagesInfo">
            <div class="imgCont" *ngFor="let imgUrl of imgList" (click)="bigimg()">
              <img class="imgSrc" [src]="imgUrl" alt="图片" style="margin-right: 10px" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- 图片查看 弹窗end-->
</div>

<style>
  .radioSales {
    margin: 8px 8px 0 0;
    /* padding-top: 29px; */
    position: relative;
    top: 1px;
  }
</style>
